<template>
  <view class="container">
    <!-- 顶部轮播Banner -->
    <swiper class="banner-swiper" 
            :indicator-dots="true" 
            :autoplay="true" 
            :interval="3000" 
            :duration="500"
            :indicator-color="'rgba(255, 255, 255, 0.3)'"
            :indicator-active-color="'#FFFFFF'"
            circular>
      <swiper-item v-for="(item, index) in bannerList" :key="index">
        <view class="banner-item" :style="{ backgroundColor: item.color }"></view>
      </swiper-item>
    </swiper>

    
    <!-- 顶部信息卡片 -->
	<view class="header-card-wrapper">
		<header-card 
			:isLogin="isLoggedIn"
			:userInfo="userInfo"
			@login="handleLogin"
		  />
	</view>
   
    <!-- 服务入口卡片 -->
   <view class="service-cards single-card" v-if="userInfo.type === USER_TYPES.MAINTENANCE && userInfo.member?.role !== MEMBER_ROLES.DIRECTOR">
	<!-- <view class="service-cards" v-if="userInfo.member?.role === MEMBER_ROLES.DIRECTOR"> -->
      <view class="service-card" @click="handleRepairService">
        <view class="service-content">
          <view class="service-icon">
            <image src="/static/home/home-service-repairer.png" mode="aspectFit"></image>
          </view>
          <text class="service-title">我的工单</text>
        </view>
      </view>
	</view>
	
    <view class="service-cards" v-else-if="userInfo.member?.role === MEMBER_ROLES.DIRECTOR">
        <!-- 报修服务卡片 - 维修工只显示这一个 -->
        <view class="service-card" @click="handleRepairService">
          <view class="service-content">
            <view class="service-icon">
              <image src="/static/home/home-service-repairer.png" mode="aspectFit"></image>
            </view>
            <text class="service-title" v-if="userInfo.type === USER_TYPES.MAINTENANCE">工单管理</text>
		    <text class="service-title" v-else>报修服务</text>
          </view>
        </view>
      <!-- GVR店铺卡片 - 只有站长可见 -->
      <view class="service-card" @click="handleShopService">
        <view class="service-content">
          <view class="service-icon">
            <image src="/static/home/home-service-shop.png" mode="aspectFit"></image>
          </view>
          <text class="service-title">GVR店铺</text>
        </view>
      </view>
    </view>

    <!-- 四个导航图标 -->
    <view class="nav-grid">
      <view class="nav-item" v-for="(item, index) in navItems" :key="index">
        <image class="nav-icon" :src= "item.icon" mode="aspectFit"></image>
        <text class="nav-text">{{ item.title }}</text>
      </view>
    </view>

    <!-- 新闻资讯区域 -->
    <view class="section">
      <home-section-header title="新闻资讯" :showMore="true" moreLink="/pages/news/news-list"/>
      <home-section-list :articles="newsItems" />
    </view>

    <!-- 培训园地区域 -->
    <view class="section">
      <home-section-header title="培训园地" />
      <scroll-view class="training-scroll" scroll-x="true" show-scrollbar="false">
        <view class="training-list">
          <view class="training-item" v-for="(item, index) in trainingItems" :key="index">
            <view class="training-image-wrapper">
              <image class="training-image bg-color-11" src="/static/default-image.png" mode="aspectFill"></image>
            </view>
            <text class="training-title">{{ item.title }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 法律法规区域 -->
    <view class="section">
      <home-section-header title="法律法规" :showMore="true"  moreLink="/pages/news/news-list" />
      <home-section-list :articles="lawItems" />
    </view>

    <!-- 企业专栏区域 -->
    <view class="section">
      <home-section-header title="企业专栏" :showMore="true"  moreLink="/pages/news/news-list" />
      <home-section-list :articles="enterpriseItems" />
    </view>

   <tabbar ref="tab" :activeIndex="activeTab"  @popLogin="handleLogin"></tabbar>
    <!-- 使用自定义的服务条款弹窗组件 -->
   <service-agreeement ref="agreementPopup" @confirm="initUserInfo" />
   <join-organization ref="joinOrgRef"  @joinOrg="handleJoinOrg"/>
   <register-success ref="successRef"/>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { userStore } from '@/utils/userStore.js'
import { USER_TYPES, MEMBER_ROLES } from '@/service/api'
import { RouterMethods } from '@/utils/router'

const tab = ref('') 
const activeTab = ref(null)//当前选中的是第几个tab 
const agreementPopup = ref(null)
// 用户信息
const userInfo = ref({
	id:'',
	name:'',// 昵称
	avatar: '', // 头像地址
    type: '', // 用户角色
	userInfo: {
		phone:'', //"手机号",
		real_name:'', // 真实姓名
		idnum:'', //二者为null, 代表 用户尚未实名
		gender:'', //性别 0 - 保密  1 - 男, 2 - 女
		main_cert_1:'',
		main_cert_2:'',
		main_cert_3:'',
		main_cert_4:'',
		main_cert_5:''
	},
	states: {
		gas_comp: '', //加油站用户是否完善了用户信息, 1 - 有, 0 或 null - 没有
		main_comp: '' //维修商用户是否完善了用户信息, 1 - 有, 0 或 null - 没有
	},
	member: { //用户属性的单位, 如果没加入组织，则为null
		orgId: '', //"组织id",
		orgCodeNo: '',//"组织代码",
		role: '',//组织角色,
		status: '' //组织审核状态
	}
})
//tab切换 底部icon切换
// const switchTab = (index) => {
// 	console.log('index界面' + index)
// 	//activeTab.value = index
// }
//强制登录的需要弹出协议
const handleLogin = () => {
	 agreementPopup.value.open()
	//showSuccess()
	// tab.value.updateUserRole()
	// showSuccess()
}


// 登录状态
const isLoggedIn = ref(false)

// 显示加入组织弹窗
const joinOrgRef = ref(null)
const showJoinOrg = () => {
  joinOrgRef.value?.open()
}

// 处理加入组织
const handleJoinOrg = () => {
  goChooseOrg()
}


onMounted(() => {
  uni.hideTabBar() 
  console.log('index onMounted')

})

// 页面显示时检查状态
onShow(() => {
  console.log("测试首页onShow")
  activeTab.value = 0
  initUserInfo()
})

// 初始化用户信息
const initUserInfo = () => {
  isLoggedIn.value = userStore.isLogin()
  const storedInfo = userStore.getUserInfo()
  console.log(JSON.stringify(storedInfo))
  if (storedInfo) {
	  //专门处理行业和设备商的
	if ((storedInfo.type === USER_TYPES.SUPPLIER ||
	     storedInfo.type === USER_TYPES.CLIENT ||
		(storedInfo.type === USER_TYPES.GAS && storedInfo.member?.role === MEMBER_ROLES.STAFF)) && 
		isLoggedIn.value && 
		!uni.getStorageSync(storedInfo.type)) {
	    uni.setStorageSync(storedInfo.type,'1')
		userInfo.value = storedInfo
		showSuccess()
		setTimeout(()=>{
			tab.value.updateUserRole()
		},1000)
		return
	} 
	  
    userInfo.value = storedInfo
    checkUserStatus()
  }
}

// 检查用户状态并处理跳转
const checkUserStatus = () => {
  // 如果未选择角色，跳转到角色选择

  if ((userInfo.value.type == undefined || userInfo.value.type == '') 
      && isLoggedIn.value) {
	RouterMethods.toChooseRole()
	return
  }
  
 // 检查是否需要加入组织
    if (!userInfo.value.member && 
        (userInfo.value.type === USER_TYPES.GAS || 
         userInfo.value.type === USER_TYPES.MAINTENANCE) && isLoggedIn.value) {
      showJoinOrg()
	  return
    }
}
const successRef = ref(null)

const showSuccess = () => {
  successRef.value?.open()
}
//去完善信息
const goChooseOrg = () => {
	// 根据用户类型检查信息完善状态
	switch (userInfo.value.type) {
	  case USER_TYPES.GAS:
	    // 加油站用户未完善信息
	    if (!userInfo.value.states.gas_comp) {
	      RouterMethods.toGasInfo()
	    } else {
		  RouterMethods.toChooseOrg()
		}
	    break
	    
	  case USER_TYPES.MAINTENANCE:
	    // 维修商用户未完善信息
	    if (!userInfo.value.states.main_comp) {
	      RouterMethods.toRepairerInfo()
	    }  else {
		  RouterMethods.toChooseOrg()
		}
	    break
	    
	  case USER_TYPES.SUPPLIER:
	  case USER_TYPES.CLIENT:
	    // 设备供应商和行业用户不需要完善信息
	    break
	}
}
onLoad((e)=>{
	console.log("测试onLoad")
})


const navItems = ref([
  { title: '新闻资讯', icon: '/static/home/home-xw.png'},
  { title: '法律法规', icon: '/static/home/home-fl.png'},
  { title: '培训园地', icon: '/static/home/home-px.png'},
  { title: '企业专栏', icon: '/static/home/home-qy.png'}
])

const newsItems = ref([
  { 
    title: '安全月活动汇总', 
    date: '2024年10月17日'
  },
  { 
    title: '安全月活动汇总', 
    date: '2024年08月02日'
  }
])

const trainingItems = ref([
  { 
    title: '短视频标题简短短视频标题简短短视频标题简短短视频标题简短'
  },
  { 
    title: '短视频标题简短短视频标题简短短视频标题简短短视频标题简短' 
  }
])

const lawItems = ref([
  {
    title: '安全月活动汇总', 
    date: '2024年10月17日'
  },
  { 
    title: '安全月活动汇总', 
    date: '2024年08月02日'
  }
])

const enterpriseItems = ref([
  {
    title: '安全月活动汇总', 
    date: '2024年10月17日'
  },
  { 
    title: '安全月活动汇总', 
    date: '2024年08月02日'
  }
])

// 添加banner数据
const bannerList = ref([
  { color: '#4CAF50' },  // 绿色
  { color: '#2196F3' },  // 蓝色
  { color: '#FF9800' }   // 橙色
])

// 判断是否为站长
const isManager = computed(() => {
  return userInfo.value?.member?.role === MEMBER_ROLES.DIRECTOR
})
// 判断是否为员工
const isStaff = computed(() => {
  return userInfo.value?.member?.role === MEMBER_ROLES.MANAGER || userInfo.value?.member?.role === MEMBER_ROLES.STAFF
})

// 处理报修服务点击
const handleRepairService = () => {
  // TODO: 跳转到报修页面
}

// 处理店铺服务点击
const handleShopService = () => {
  // TODO: 跳转到店铺页面
}
</script>

<style>
.container {
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom) + 80rpx);
  /* background-color : #2196F3;*/
}


/* Banner样式调整 */
.banner-swiper {
  width: 100%;
  height: 540rpx;
  position: relative;
}

.banner-item {
  width: 100%;
  height: 100%;
}

/* 小程序自定义指示点样式 */
/deep/ .wx-swiper-dots {
  bottom: 80rpx !important;
}

/deep/ .wx-swiper-dot {
  width: 24rpx !important;
  height: 6rpx !important;
  border-radius: 0rpx !important;
  margin: 0 8rpx !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

/deep/ .wx-swiper-dot-active {
  width: 24rpx !important;
  background: #FFFFFF !important;
}

/* App端自定义指示点样式 */
:deep(.uni-swiper-dots) {
  bottom: 80rpx !important;
}

:deep(.uni-swiper-dot) {
  width: 24rpx !important;
  height: 6rpx !important;
  border-radius: 0rpx !important;
  margin: 0 8rpx !important;
  background: rgba(255, 255, 255, 0.3) !important;
}

:deep(.uni-swiper-dot-active) {
  width: 24rpx !important;
  background: #FFFFFF !important;
}
.header-card-wrapper {
   margin-top: -62rpx;
   padding: 0 40rpx;
}

/* 服务卡片样式 */
.service-cards {
  /* background-color: royalblue; */
  display: flex;
  padding-top: 46rpx;
  padding-left: 42rpx;
  padding-right: 42rpx;
  gap: 20rpx;
}

.service-card {
  flex: 1;
  height: 148rpx;
  background: #FFFFFF;
  box-shadow: 0px 0px 6px 0px rgba(173,173,173,0.5);
  overflow: hidden;
}

/* 单卡片时占满宽度 */
.single-card .service-card{
   width: 100%;
}

.service-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-icon {
  width: 96rpx;
  height: 96rpx;
  margin-right: 24rpx;
  
/*  image {
    width: 100%;
    height: 100%;
  } */
}
.service-icon image {
	width: 100%;
	height: 100%;
}
.service-title {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}


/* 导航网格样式 */
.nav-grid {
  display: flex;
  justify-content: space-between;
  padding: 0 74rpx;
  /* background: greenyellow; */
  margin-top: 40rpx;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-icon {
  width: 96rpx;
  height: 96rpx;
  margin-bottom: 8rpx;
}

.nav-text {
  font-family: PingFangSC-Medium;
  font-size: 20rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}
/* 修改新闻资讯相关样式 */
.section {
  padding-left: 52rpx;
  padding-right: 52rpx;
  /* background: red; */
}
/* 修改新闻资讯相关样式 */
/* .section:last-child {
  margin-bottom: calc(120rpx + env(safe-area-inset-bottom) + 40rpx);
  background: lightblue;
} */



.training-scroll {
  width: 100%;
  height: 538rpx;
  /* background-color: aqua; */
}

.training-list {
  display: flex;
  box-sizing: border-box; 
}

.training-item {
  flex: 1;
/*  width: 220rpx; */
  margin-right: 16rpx;
}

.training-item:last-child {
  margin-right: 0;
}

.training-image-wrapper {
  width: 100%;
  height: 416rpx;
  overflow: hidden;
  margin-bottom: 12rpx;
}

.training-image {
  width: 100%;
  height: 100%;
}

.training-title {
  font-family: PingFangSC-Regular;
  font-size: 24rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 400;
  display: block;
 /* 描述文字多显示两行 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* 随机背景色类 */
.bg-color-1 {
  background-color: #FF9800;
}

.bg-color-2 {
  background-color: #2196F3;
}

.bg-color-3 {
  background-color: #4CAF50;
}

.bg-color-4 {
  background-color: #9C27B0;
}

.bg-color-5 {
  background-color: #F44336;
}

.bg-color-6 {
  background-color: #009688;
}

.bg-color-7 {
  background-color: #673AB7;
}

.bg-color-8 {
  background-color: #FFC107;
}

.bg-color-9 {
  background-color: #795548;
}

.bg-color-10 {
  background-color: #3F51B5;
}

.bg-color-11 {
  background-color: #8BC34A;
}

.bg-color-12 {
  background-color: #E91E63;
}

/* 为所有图片添加过渡效果 */
image {
  transition: background-color 0.3s ease;
}


</style>
